<template>
	<view class="container">
		<view class="avatar_box">
			<view class="avatar">
				<button class="up-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image
						:src="user_info.avatarUrl || `https://oss.tianliyx.cn/images/20230912/0136722001694489451.png`">
					</image>
				</button>
				<text class="iconfont icon-bianji"></text>
			</view>

			<view class="avatar_info">
				<view class="nick_name">
					{{ user_info.nick_name }}
				</view>
				<view class="mobile">
					绑定手机号：{{ user_info.mobile }}
				</view>
			</view>
		</view>

		<view class="user_info">
			<view class="line">
				<view class="label">昵称</view>
				<view class="right">
					<input type="nickname" v-model="user_info.nick_name" @blur="getnickname" placeholder="请输入你的昵称">
				</view>
			</view>
			<view class="line">
				<view class="label">手机号</view>
				<view class="right">
					<view class="span-box">
						<button class="mobile_btn" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">{{ user_info.mobile || '授权绑定手机号' }}</button>
					</view>
				</view>
			</view>
		</view>


		<view class="sub-btn" @click="save_info">保 存</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';

	import {
		get_mobile,
		update_info
	} from "@/api/user.js"
	import {
		BASE_URL
	} from "@/utils/request.js"
	import {
		useAuthStore
	} from '@/stores/user.js';
	import {
		COMMON
	} from '@/utils/commom';

	const authStore = useAuthStore();
	const user_info = ref({});

	onShow(() => {
		authStore.initialize();
		user_info.value = authStore.userInfo;
	})

	// 获取昵称
	function getnickname(e) {
		user_info.value.nick_name = e.detail.value;
	}

	// 获取手机号
	function getPhoneNumber(e) {
		if (e.detail.code) {
			get_mobile(e.detail.code).then(res => {
				user_info.value.mobile = res.data.phoneNumber;
			})
		} else {
			uni.showToast({
				title: '请选择需要授权的手机号',
				icon: 'none'
			})
		}
	}

	//上传头像
	function onChooseAvatar(e) {
		wx.uploadFile({
			url: BASE_URL + `api.php?m=Api&c=Common&a=uploadFile`,
			filePath: e.detail.avatarUrl,
			name: 'file',
			formData: {
				token: user_info.value.token
			},
			success: function(res) {
				let data = JSON.parse(res.data);
				user_info.value.avatarUrl = data.data;
			}
		})
	}

	// 保存个人信息
	function save_info() {
		let data = {
			avatarUrl: user_info.value.avatarUrl,
			nickName: user_info.value.nick_name,
			mobile: user_info.value.mobile
		}

		update_info(data).then(res => {
			if (res.status) {
				COMMON.Toast(`修改成功`);
				uni.setStorageSync('user_info', user_info.value);
				setTimeout(function() {
					uni.navigateBack()
				}, 1000);
			}
		})
	}
</script>


<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.avatar_box {
		overflow: hidden;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 10px;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			float: left;
			position: relative;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			.icon-bianji {
				position: absolute;
				color: #fff;
				z-index: 100;
				left: 75rpx;
				top: 75rpx;
				font-size: 32rpx;
				background-color: #708e37;
				border-radius: 100%;
			}

			.up-btn {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				padding: 0;
				background-color: #ff7500;
				position: relative;
				overflow: visible;

				&::after {
					border: none;
				}

				image {
					border-radius: 50%;
				}

			}
		}

		.avatar_info {
			width: 400rpx;
			float: left;
			overflow: hidden;
			padding-left: 35rpx;


			.nick_name {
				font-size: 28rpx;
				color: #333;
				padding: 15rpx 0;
			}

			.mobile {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.user_info {
		overflow: hidden;

		.line {
			margin-top: 30rpx;
			border-radius: 10px;
			width: 100%;
			overflow: hidden;
			padding: 30rpx;
			font-size: 26rpx;
			display: flex;
			background: #fff;

			.label {
				width: 30%;
				color: #333;
			}

			.right {
				width: 70%;
				text-align: right;
				color: #333;

				.span {
					background-color: #f1f1f1;
					border-radius: 10rpx;
					margin-right: 30rpx;
					padding: 6rpx 20rpx 6rpx 14rpx;
					display: flex;
					font-size: 26rpx;
					color: #999;
				}

			}
		}
	}




	.sub-btn {
		background-color: #ff7500;
		width: 100%;
		margin: auto;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-top: 80rpx;
		color: #fff;
	}

	.mobile_btn {
		text-align: right;
		padding: 0;
		line-height: 25px;
		background: none;
		color: #999;
		font-size: 26rpx;

		&::after {
			border: none;
		}
	}
</style>